<template>
	<yb-popup :custom-id="customIdSync" :custom-class="customClassSync" :custom-style="customStyleSync" :options="optionsSync" :duration="optionsSync.duration" direction="bottom" :visible="visible" @hide="hide">
		<view class="yb-flex yb-action-sheet"
		:style="{
			'background-color': optionsSync.bgColor,
			'border-top-left-radius': Util.pixelunit(optionsSync.radius),
			'border-top-right-radius': Util.pixelunit(optionsSync.radius)
		}">
			<yb-text
			align="center"
			:lines="1"
			:value="titleSync.text"
			:color="titleSync.color"
			:size="titleSync.size"
			v-if="titleSync.text"
			:custom-style="{
				'border-bottom-width': Util.pixelunit(borderSync.width),
				'border-bottom-style': borderSync.style,
				'border-bottom-color': borderSync.color,
				'padding-top': '40rpx',
				'padding-bottom': '40rpx'
			}"></yb-text>
			<scroll-view scroll-y="true" :style="{height: itemList.length > 6 ? '600rpx' : ''}">
				<yb-tap
				active="mask"
				:custom-style="{
					'border-bottom-width': Util.pixelunit(borderSync.width),
					'border-bottom-style': borderSync.style,
					'border-bottom-color': borderSync.color,
					'height': '100rpx'
				}"
				custom-class="yb-action-sheet-item yb-row yb-align-center yb-justify-center"
				v-for="(item, index) in itemListSync"
				:key="index"
				:disabled="item.disabled"
				@click="onItemClick(index)">
					<yb-text
					custom-class="text"
					align="center"
					:custom-style="{
						'opacity': item.disabled ? 0.3 : 1
					}"
					:lines="1"
					:value="item.label"
					:color="value == item.value ? optionsSync.focus : item.color"
					:size="item.size"
					></yb-text>
					<view class="yb-action-sheet-item-check yb-flex yb-justify-center">
						<yb-icon v-if="value == item.value" name="check-circle" :size="item.size" :color="optionsSync.focus"></yb-icon>
					</view>
				</yb-tap>
			</scroll-view>
			<template v-if="cancelSync.show">
				<yb-gap :color="borderSync.color"></yb-gap>
				<yb-tap active="mask" @click="actionSheetCancel">
					<yb-text
					align="center"
					:value="cancelSync.text"
					:color="cancelSync.color"
					:size="cancelSync.size"
					:custom-style="{
						'border-bottom-width': Util.pixelunit(borderSync.width),
						'border-bottom-style': borderSync.style,
						'border-bottom-color': borderSync.color,
						'padding-top': '40rpx',
						'padding-bottom': '40rpx'
					}"></yb-text>
				</yb-tap>
			</template>
		</view>
		<yb-safe-bottom></yb-safe-bottom>
	</yb-popup>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		computed: {
			Util () {
				return Util
			},
			titleSync () {
				return Object.assign({}, {
					text: '',
					color: '#666',
					size: '30rpx',
				}, Util.typeof(this.title) == 'Object' ? this.title : Util.typeof(this.title) == 'String' ? {text: this.title} : {})
			},
			itemListSync () {
				return this.itemList.map(item => {
					return Object.assign({}, {
						label: '',
						value: '',
						color: this.optionsSync.color,
						size: this.optionsSync.size,
						disabled: false
					}, item)
				})
			},
			borderSync () {
				return Object.assign({}, {
					width: '1px',
					style: 'solid',
					color: '#eee'
				}, Util.typeof(this.optionsSync.border) == 'Object' ? this.optionsSync.border : {})
			},
			cancelSync () {
				return Object.assign({}, {
					text: '取消',
					show: true,
					color: '#333',
					size: '32rpx'
				}, Util.typeof(this.optionsSync.cancel) == 'Object' ? this.optionsSync.cancel : Util.typeof(this.optionsSync.cancel) == 'Boolean' ? {show: this.optionsSync.cancel} : Util.typeof(this.optionsSync.cancel) == 'String' ? {text: this.optionsSync.cancel} : {})
			},
			optionsSync () {
				return Object.assign({}, {
					popout: 'fade',
					duration: 300,
					bgColor: '#fff',
					color: '#333',
					size: '32rpx',
					focus: '#FF3B30',
					border: {},
					cancel: '取消',
					radius: '20rpx'
				}, this.options)
			}
		},
		data () {
			return {
				visible: false,
				value: '',
				title: '',
				itemList: [],
				options: {},
				success: null,
				fail: null
			}
		},
		methods: {
			show ({title, itemList, value, cancel, options, success, fail}) {
				this.itemList = []
				this.title = title || ''
				this.itemList = itemList || []
				this.options = options || {},
				this.value = value || ''
				this.success = success || null
				this.fail = fail || null
				this.visible = true
			},
			onItemClick (index) {
				this.value = this.itemListSync[index].value
				this.actionSheetConfirm({
					index: index,
					detail: {
						label: this.itemListSync[index].label || '',
						value: this.itemListSync[index].value || ''
					}
				})
			},
			actionSheetConfirm (data) {
				this.visible = false
				this.success ? this.success({
					confirm: true,
					data: data
				}) : null
			},
			actionSheetCancel () {
				this.visible = false
				this.success ? this.success({
					confirm: false
				}) : null
			},
			hide () {
				this.visible = false
				this.fail ? this.fail() : null
			}
		}
	}
</script>

<style>
	.yb-action-sheet-item {
		position: relative;
	}
	.yb-action-sheet-item-check {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 50rpx;
	}
</style>
